<!-- data-source 函数 -->
<template>
    <div>
        <van-list-view
          ref="listView"
          scrollTarget="self"
          pageable="pagination"
          :page-size="10"
          :data-source="load"
          :multiple="false"
          selected-icon="sure"
          unselected-icon="countdown"
          :striped="true"
          style="--van-list-view-item-selected-backgroud: #f10;">
            <template #item="scope">
                <van-cell
                  style="backgroud: transparent;"
                  :title="scope.item.text"
                  :isLink="false">
                </van-cell>
            </template>

            <template #prev>
              <span>prev</span>
            </template>

            <template #next>
              <span>next</span>
            </template>
        </van-list-view>

        <input type="number" v-model="page" />
        <div @click="loadTo">跳转 {{ page }} 页</div>
    </div>
</template>
<script>
// 模拟后端请求
const mockRequest = (data, timeout = 300) => new Promise((res, rej) => setTimeout(() => res(data), timeout));
// 模拟数据服务
const mockService = {
    load(params) {
      const { page, size, filterText } = params;
      const list = [
            { text: 'Batch', value: 'bat' },
            { text: 'C', value: 'c' },
            { text: 'C#', value: 'csharp' },
            { text: 'C++', value: 'cpp' },
            { text: 'CSS', value: 'css' },
            { text: 'Clojure', value: 'clojure' },
            { text: 'CoffeeScript', value: 'coffeescript' },
            { text: 'Coq', value: 'coq' },
            { text: 'Diff', value: 'diff' },
            { text: 'Dockerfile', value: 'dockerfile' },
            { text: 'F#', value: 'fshape' },
            { text: 'Go', value: 'go' },
            { text: 'Groovy', value: 'groovy' },
            { text: 'HLSL', value: 'hlsl' },
            { text: 'HTML', value: 'html' },
            { text: 'Handlebars', value: 'Handlebars' },
            { text: 'Ignore', value: 'ignore' },
            { text: 'Ini', value: 'ini' },
            { text: 'JSON', value: 'json' },
            { text: 'Java', value: 'java' },
            { text: 'JavaScript', value: 'javascript' },
            { text: 'Jinja', value: 'jinja' },
            { text: 'Jupyter', value: 'jupyter' },
            { text: 'Less', value: 'less' },
            { text: 'Log', value: 'log' },
            { text: 'Lua', value: 'lua' },
            { text: 'Makefile', value: 'makefile' },
            { text: 'Markdown', value: 'markdown' },
            { text: 'Objective-C', value: 'objective-c' },
            { text: 'Objective-C++', value: 'objective-cpp' },
            { text: 'PHP', value: 'php' },
            { text: 'Perl', value: 'perl' },
            { text: 'PowerShell', value: 'powershell' },
            { text: 'Properties', value: 'properties' },
            { text: 'Pug', value: 'jade' },
            { text: 'Python', value: 'python' },
            { text: 'R', value: 'r' },
            { text: 'Razor', value: 'razor' },
            { text: 'Ruby', value: 'ruby' },
            { text: 'Rust', value: 'rust' },
            { text: 'SCSS', value: 'scss' },
            { text: 'SQL', value: 'sql' },
            { text: 'SVG', value: 'svg' },
            { text: 'Shaderlab', value: 'shaderlab' },
            { text: 'Shell Script', value: 'shellscript' },
            { text: 'Swift', value: 'swift' },
            { text: 'TypeScript', value: 'typescript' },
            { text: 'Visual Basic', value: 'vb' },
            { text: 'Vue', value: 'vue' },
            { text: 'XML', value: 'xml' },
            { text: 'XSL', value: 'xsl' },
            { text: 'YAML', value: 'yaml' },
      ]

      let result

      if (filterText) {
        result = list.filter(item => item.text.includes(filterText))
      } else {
        result = list
      }

      return mockRequest({
        total: result.length,
        list: result.slice((page - 1) * size, page * size)
      });
    },
};

export default {
    data() {
        return {
            value: 'cpp',
            page: 1,
        };
    },
    methods: {
        load(params) {
            console.log('params', params);
            return mockService.load(params);
        },

        loadTo() {
            this.$refs.listView.loadTo(this.page);
        }
    }
};
</script>
<style module>
.result {
    height: var(--list-view-height);
    padding: var(--list-view-item-padding);
    border: var(--border-width-base) solid var(--border-color-base);
    color: var(--color-light);
}
</style>
